<template>
    <div class="tab">
      <router-link tag="div" to="/recommend" class="tab-item">
        <span>推荐</span>
      </router-link>
      <router-link tag="div" to="/singer" class="tab-item">
        <span>歌手</span>
      </router-link>
      <router-link tag="div" to="/rank" class="tab-item">
        <span>排行</span>
      </router-link>
      <router-link tag="div" to="/search" class="tab-item">
        <span>搜索</span>
      </router-link>
    </div>
</template>

<script type="text/ecmascript6">
    export default {
        data() {
            return {};
        },
        components:{},
        methods:{}
    }
</script>

<style lang = 'scss'>
  @import "../../common/scss/variable";
.tab{
  display: flex;
  height:40px;
  line-height:40px;
  text-align: center;
  color: $color-text-d;
  font-size:$font-size-medium ;
  .tab-item{
    flex: 1;
    &.router-link-active{
      color: $color-theme;
      span{
        border-bottom:2px solid $color-theme;
        padding-bottom:3px;
      }
    }
  }
}
</style>
